<template>
  <a-card :bordered="false">
    <a-tree
      v-model:selectedKeys="currentSelectKeys"
      @select="selectNode"
      v-if="devicetypeList.length"
      :tree-data="devicetypeList"
      :field-names="{ children: 'children', title: 'title', key: 'id', value: 'id' }"
      style="margin-top: 15px"
      :default-expand-all="true"
    />
  </a-card>
</template>

<script>

export default {
  name: 'DevicetypeTree',
  emits: ['update:currentSelectDeviceId', 'changeNodeSelect'],
  components: {

  },
  props: {
    devicetypeList: Array,
    currentSelectDeviceId: String
  },
  mounted() {
    setTimeout(() => {
      if (this.devicetypeList.length > 0) {
        this.currentSelectKeys = [this.devicetypeList[0].id];
      }
    }, 200);
  },
  data() {
    return {
      // 选中的节点
      currentSelectKeys: null,
    };
  },
  methods: {
    /**
     * 选择节点时候触发的事件
     *
     * @author fengshuonan
     * @date 2021/4/11 19:43
     */
    selectNode(selectedKeys) {
      this.$emit('update:currentSelectDeviceId', selectedKeys[0]);
      this.$emit('changeNodeSelect');
    }
  }
};
</script>

<style scoped></style>
